<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import axios, { getServerUrl } from "@/util/axios";
import { ElMessage,ElMessageBox  } from "element-plus";
import { Plus, Delete } from "@element-plus/icons-vue";

const tableData = ref([]);

// 定义组件接收的属性
const props = defineProps({
  imageDetailsValue: {
    type: Object,
    default: () => {},
    required: true, 
  },
});

const headers = ref({
  token: window.sessionStorage.getItem("token"),
});

// proPic是后端实体类图片的名称，创建一个响应式对象ruleForm，用于存储与商品详情轮播图相关的表单数据，
// 包含商品ID、排列序号、图片相关信息等字段，初始值设置了各字段的默认情况，后续会根据用户操作和接口数据进行相应更新
const ruleForm = ref({
  productId: -1,
  sort: "",
  image: "",
});

// 定义表单验证规则，是一个响应式对象，用于验证表单输入的合法性，这里针对sort字段（排列序号）设置了验证规则
const rules = ref({
  sort: [
    {
      // 表示该字段必填
      Required: true,
      message: "请输入排列号",
    },
    {
      // 验证输入值是否为数字类型
      type: "number",
      message: "排列号必须为整数",
       // 将输入的值转换为数字类型，确保后续处理的数据格式正确
      transform: (value) => Number(value),
    },
  ],
});

const ruleFormRef = ref(null);

 // 创建一个响应式数据imageUrl，用于存储商品图片的完整URL地址，初始值为空字符串
const imageUrl = ref("");

// 异步函数，用于初始化商品详情轮播图列表数据
    // 通过axios发起GET请求到指定接口（根据商品ID获取轮播图列表），获取到的数据中的轮播图列表赋值给tableData.value，用于在页面表格中展示轮播图相关信息
const initProductImageList = async () => {
  console.log("中"+ruleForm.value.productId)
  const res = await axios.get("admin/productImage/list/" + ruleForm.value.productId);
  tableData.value = res.data.list;
};


 // 使用watch函数监听props中的imageDetailsValue属性的变化
watch(
  //里面有两个参数，第一个props监听哪个参数，这里监听props中的imageDetailsValue属性，当它的值发生改变时触发后续操作
  () => props.imageDetailsValue,
  //第二个监听后要执行的哪个操作，回调函数，当被监听的属性变化时执行的操作，此处将传入的imageDetailsValue中的id值赋给ruleForm的productId字段（若不存在则设为 -1），然后调用initProductImageList函数去获取并初始化轮播图列表数据
  () => {
    ruleForm.value.productId = props.imageDetailsValue.id || -1;
    initProductImageList();
  },
  { deep: true, immediate: true }
);

// 定义父组件事件
const emits = defineEmits(["update:modelValue"]);
const handleClose = () => {
  console.log("xxx");
  // 调用执行
  emits("update:modelValue", false);
};

//回显修改后的图片，处理图片上传成功后的回调函数，用于更新图片的URL地址以及对应的文件名（存储在ruleForm中），
// 根据接口返回的数据（res）来更新imageUrl和ruleForm.value.image的值，以实现图片回显和数据更新
const handleAvatarSuccess = (res) => {
  imageUrl.value = getServerUrl() + res.data.src;
  ruleForm.value.image = res.data.title;
};

 // 确认按钮点击时执行的异步函数，用于提交保存商品详情轮播图相关信息
const handleConfirm = async () => {
  // 删除ruleForm中一些不需要提交到后端的字段
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      delete ruleForm.value.type;
      delete ruleForm.value.hotDateTime;
      delete ruleForm.value.hot;
      // 使用axios发起POST请求，将处理后的ruleForm中的数据发送到 "/admin/productImage/add" 接口进行保存
      let result = await axios.post("/admin/productImage/add", ruleForm.value);
      let data = result.data;
      if (data.code == 0) {
        ElMessage.success("执行成功");
        ruleFormRef.value.resetFields();
        initProductImageList();
        imageUrl.value = ""
        // handleClose();
      } else {
        ElMessage.error(data.msg);
      }
    }
  });
};

//详情页图片设置删除功能
const handlDelete = (id, status) => {
  ElMessageBox.confirm("是否确定删除订单？", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    //执行成功
    .then(async () => {
      let res = await axios.get("/admin/productImage/delete/" + id);
      if (res.data.code == 0) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.data.msg,
        });
      }
      initProductImageList();

    })
    //遇到异常执行
    .catch(() => {});
};
</script>

<template>
  <!-- Dialog 对话框实现详情按钮弹窗显示， 饿了么ui组件 -->
  <!-- model-value是否显示 Dialog -->
  <!-- title说明：Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 -->
  <!-- detailsVisible是从父组件order下index传过来 -->
  <el-dialog
    model-value="productImageDetailsVisible"
    title="商品详情轮播图"
    width="30%"
    @close="handleClose"
    center
  >
    <el-form
      ref="ruleFormRef"
      style="text-align: center"
      :model="ruleForm"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="排列序号" prop="sort">
        <el-input v-model="ruleForm.sort" style="width: 100px"></el-input>
      </el-form-item>

      <el-upload
        :headers="headers"
        class="avatar-uploader"
        :action="getServerUrl() + '/admin/productImage/uploadImage'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>

      <el-form-item>
        <el-button type="primary" @click="handleConfirm">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" height="500" style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="image" label="轮播图" width="200">
        <template v-slot="scope">
          <!-- /image/fiery是后端WebAppConfigurer里写的 -->
          <img :src=" 'http://localhost:8080/image/productImages/' + scope.row.image" width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排列序号" width="80" />

      <el-table-column prop="action" label="操作" width="80" fixed="right">
        <template v-slot="scope">
          <el-button
            type="danger"
            :icon="Delete"
            @click="handlDelete(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

